<!--
 * @Author: your name
 * @Date: 2020-02-25 13:32:39
 * @LastEditTime: 2020-03-19 13:47:30
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \福路德扫码系统\html\cksm.html
 -->
<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport"
		content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0,viewport-fit=cover" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
	<title>Hello APP</title>
	<link rel="stylesheet" type="text/css" href="../css/vant.css">
	<link rel="stylesheet" type="text/css" href="../css/base.css" />
	<link rel="stylesheet" type="text/css" href="../css/local.css" />
	<script type="text/javascript" src="../script/jquery.js"></script>
	<script type="text/javascript" src="../script/layer/mobile/layer.js"></script>
	<script type="text/javascript" src="../script/vue.min.js"></script>
	<script type="text/javascript" src="../script/vant.min.js"></script>
	<script type="text/javascript" src="../script/fastclick.js"></script>
	<script type="text/javascript" src="../script/base.js"></script>
	<script type="text/javascript" src="../script/app-tree.js"></script>
	<style type="text/css">
		.bottom {
			padding: 8px 15px;
		}

		.van-field__control {
			font-size: 16px;
		}

		.pictitle {
			line-height: 24px;
			color: #646566;
			user-select: none;
		}

		.piccontent {
			padding-top: 10px;
			overflow: hidden;
		}

		.van-uploader__preview {
			margin-right: 15px;
		}
	</style>
</head>

<body>
	<div id="app" v-cloak>
		<div class="box">
			<van-nav-bar-main title="编辑备注" left-arrow @click-left="onClickLeft"></van-nav-bar-main>
			<div class="content">
				<van-field v-model="mContent" rows="5" autosize type="textarea" placeholder="请输入备注">
				</van-field>
				<van-cell>
					<div class="pictitle">图片</div>
					<div class="piccontent">
						<div class="van-uploader">
							<div class="van-uploader__wrapper">
								<div class="van-uploader__preview"
									v-for="(imgItem,imgItemIndex) in imgArray">
									<div class="van-image van-uploader__preview-image"
										style="overflow: hidden; border-radius: 4px;"
										@click="previewImage(imgItemIndex)">

										<img :src="serverIP + imgItem" class="van-image__img"
											style="object-fit: cover;" />
									</div>
									<div class="van-uploader__preview-delete"
										@click="deleteImgItem(imgItemIndex)">
										<i
											class="van-icon van-icon-cross van-uploader__preview-delete-icon"></i>
									</div>

								</div>
								<div class="van-uploader__upload" v-if="imgArray.length < 9"
									@click="addImage(imgArray.length)">
									<i class="van-icon van-icon-plus van-uploader__upload-icon"></i>

								</div>
							</div>
						</div>
					</div>
				</van-cell>
			</div>
			<div class="bottom">
				<div class="flex-main">
					<van-row gutter="30">
						<van-col :span="24">
							<van-button type="info" block round :disabled="ifConfirm" :loading="ifConfirm"
								@click="submitRemark">确认</van-button>
						</van-col>
					</van-row>
				</div>
			</div>
		</div>
	</div>
</body>
<script type="text/javascript">
	var vm;
	apiready = function () {

		var UIAlbumBrowser = api.require('UIAlbumBrowser');
		var photoBrowser = api.require('photoBrowser');
		var isOpenImg = false;

		api.addEventListener({
			name: 'keyback'
		}, function (ret, err) {
			if (!isOpenImg) {
				vm.onClickLeft();
			} else {
				photoBrowser.close();
			}

		});

		vm = new Vue({
			el: '#app',
			data: {
				showLoading: false,
				ifConfirm: false,
				serverIP: 'http://' + APP.serverIP(),
				mContent: '',
				imgArray:api.pageParam.img
			},
			created: function () {
				var that = this;
				// alert(JSON.stringify(APP.getUserInfo()))
			},
			methods: {
				previewImage: function (index) {
					var that = this;
					var array = JSON.parse(JSON.stringify(that.imgArray));
					for (var i in array) {
						array[i] = that.serverIP + array[i];
					}
					photoBrowser.open({
						images: array,
						activeIndex: index,
						bgColor: '#000'
					}, function (ret) {
						isOpenImg = true;
						if (ret) {
							if (ret.eventType == 'click') {
								isOpenImg = false;
								photoBrowser.close();
							}
						}
					})
				},
				deleteImgItem: function (index) {
					var that = this;
					that.imgArray.splice(index, 1)
				},
				addImage: function (len) {
					var that = this;
					UIAlbumBrowser.imagePicker({
						max: 9 - len,
						styles: {
							nav: {
								bg: 'rgba(0,0,0,.6)',
								finishText: '完成'
							}
						},
						rotation: true
					}, function (ret) {
						if (ret) {
							if (ret.originalPath) {
								UIAlbumBrowser.transPath({
									path: ret.assetPath || ret.originalPath
								}, function (ret, err) {
									if (ret) {
										APP.uploadFile('备注图片', ret.path, function (path) {
											that.imgArray.push(path);
										})

									}
								});
							} else if (ret.eventType == 'nextStep') {
								UIAlbumBrowser.closePicker();
								var imgLists = ret.list;
								var repeatImg = function (i) {
									if (i == imgLists.length) {
										return;
									}
									UIAlbumBrowser.transPath({
										path: imgLists[i].path
									}, function (ret, err) {
										if (ret) {
											APP.uploadFile('备注图片', ret.path, function (path) {
												that.imgArray.push(path);
											})
											i++;
											repeatImg(i);
										}
									});
								}
								repeatImg(0)

							}

						}
					});
				},
				submitRemark: function () {
					var that = this;
					if (!that.mContent) {
						layer.open({
							content: '请输入备注',
							skin: 'msg',
							time: 2
						});
						return false;
					}
					that.ifConfirm = true;
					api.sendEvent({
						name: 'submitRemark',
						extra: {
							content: that.mContent,
							imgArray:that.imgArray
						}
					});
					api.closeWin();

				},
				onClickLeft: function () {
					var that = this;
					api.closeWin();
				}
			}
		})
	};
</script>

</html>